<template>
  <div class="container">
    <div class="container-menu">
      <div class="container-logo"><img src="~__assets/images/logo.png" /></div>
      <el-menu
      :default-active="activeMenu"
      class="el-menu cms-menu"
      background-color="#2d3554"
      text-color="#d0d4df"
      :unique-opened="true"
      active-text-color="#fff">
      <el-menu-item
                    :key="i" v-for="(menu, i) in menuList" 
                    :index="menu.attributes.url || '0'"
                    v-if="!menu.children">
        <i :class="menu.iconCls"></i>
        <span slot="title" @click="clickMenu(menu.attributes.url, menu.text)">{{menu.text}}</span>
      </el-menu-item>
      <el-submenu :index="menu.id"
                  :key="i"
                  v-for="(menu, i) in menuList"
                  v-if="menu.children && menu.children.length > 0" >
        <template slot="title">
          <i :class="menu.iconCls"></i>
          <span>{{menu.text}}</span>
        </template>
        <el-menu-item :index="menuChild.attributes.url"
                      :key="menuChildIndex"
                      v-for="(menuChild, menuChildIndex) in menu.children">
          <span @click="clickMenu(menuChild.attributes.url, menuChild.text)">{{menuChild.text}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    </div>
    <div class="container-main">
      <div class="container-header clearfix">
        <p>系统通知：后台管理平台上线了!</p>
        <div class="container-user pull-right">
            <el-dropdown trigger="click" :hide-on-click="false">
                <div class="el-dropdown-link userinfo-inner">
                  <img src="~__assets/images/head.jpg" />
                  <span>{{name}}<i class="fa fa-angle-down fa-lg"></i></span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item  @click.native="goToPersonalInfo"><i class="fa fa-user-circle-o"></i>&nbsp;个人资料</el-dropdown-item>
                    <el-dropdown-item  @click.native="showChangePW = true"><i class="el-icon-edit"></i>&nbsp;修改密码</el-dropdown-item>
                    <el-dropdown-item  @click.native="exit" ><i style="color: #000;" class="fa fa-power-off"></i>&nbsp;退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
      </div>
      <div class="container-right">
        <div class="cms-tab-nemu" v-show="showTab">
          <cms-tab-menu ref="tabMenu"></cms-tab-menu>
        </div>
        <div :class="mainClass">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <cmsChangePw v-if='showChangePW' :isShowPwdDialog = "isShowPwdDialog"></cmsChangePw>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import TabMenu from '../../components/tab-menu/index.vue';
import cmsChangePw from '../personal-info/changePw.vue';
import { SysMenuTree } from '../../api/Interface';
import UserService from '../../service/system-config/user';
@Component({
  components: {
    'cms-tab-menu': TabMenu,
    'cmsChangePw': cmsChangePw,
  }
})
export default class Menu extends Vue {
  // 初始化数据
  public showTab: boolean = false;
  public menuList: SysMenuTree[] = this.$store.state.user.menuList;
  // 当前选中菜单
  public activeMenu: string = '';
  public mainClass: string = '';
  // 改变密码 dialog
  public showChangePW: boolean = false; 
  public id: string = this.$store.state.user.uid; // 登录者的id
  // 显示 登陆者 的名字
  public name: string = '';
  public $refs: {
    tabMenu: HTMLFormElement;
  };
  // 声明周期钩子
  public created() {
    this.showTab = this.$root.$route.meta.showTab;
    this.activeMenu = this.$root.$route.meta.menu;
    this.mainClass = this.showTab ? 'cms-router-view' : 'cms-router-view-no-p';
  }
  public mounted() {
    this.getDetail();
  }
  public async updated() {
    this.showTab = this.$root.$route.meta.showTab;
    this.activeMenu = this.$root.$route.meta.menu;
    this.mainClass = this.showTab ? 'cms-router-view' : 'cms-router-view-no-p';
  }
  
  public clickMenu(url: string, name: string) {
    this.$refs.tabMenu.addTab({ url, name });
  }
    // 跳转个人信息
  public goToPersonalInfo() {
     this.$refs.tabMenu.addTab({name: '个人资料', url: 'personal-info'});
  }
  public exit() {
    this.$router.push({ name: 'login' });
  }
  public isShowPwdDialog() {
    this.showChangePW = !this.showChangePW;
  }
    //获取用户详情
  public async getDetail() {
      const res = await UserService.getSysUserById(this.id);
      this.name = res.sysUser.name;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container-menu{
  width:170px;
  position: fixed;
  left:0;
  top:0;
  bottom:0;
  overflow-y:auto;
}
.container-main{
  background:#f4f7fe;
  position: absolute;
  top:0;
  bottom:0;
  left:170px;
  right:0;
  overflow-y:auto;
}
.el-menu{
  height:100%;
}
.container-right{
  margin:0px 20px 20px;
  border:1px solid #d1dbe5;
  box-shadow:0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
.cms-router-view, .cms-router-view-no-p{
  background:#fff;
  padding:30px;
  min-height:170px;
}
.cms-router-view-no-p{
  padding:0;
}
.container-header{
  height:70px;
  background:#f5f7fd;
  text-align:center;
}
.container-header p{
  color:#67c23a;
  font-size:13px;
  line-height:70px;
  display:inline-block;
}
.container-user{
  margin:15px 20px;
  cursor: pointer;
}
.userinfo-inner img{
  width:30px;
  height:30px;
  border-radius:50%;
  float:left;
  margin-right:10px;
}
.userinfo-inner span{
  float:left;
  line-height:30px;
}
.fa-angle-down {
  margin-left:30px;
}

</style>
